<template>
  <h1>循环指令</h1>
  <ul >
    <!-- 循环遍历arr数组,uname就是本轮循环遍历到的元素 -->
    <li v-for="uname in arr">{{uname}}</li>
  </ul>
  <ol>
    <!-- 从1开始遍历,一直到数字5,固定写法,步长为1(++),结束数字5可以自定义 -->
    <li v-for="item in 5">{{item}}</li>
  </ol>

  <table border="1px">
    <caption>商品列表</caption>
    <tr>
      <th>序号</th>
      <th>商品标题</th>
      <th>商品价格</th>
      <th>商品库存</th>
      <th>操作</th>
    </tr>
    <tr v-for="(p,index) in productArr">
      <td>{{index+1}}</td>
      <td>{{p.title}}</td>
      <td>{{p.price}}</td>
      <td>{{p.num}}</td>
      <td><button @click="del(index)">删除</button></td>
    </tr>
  </table>
</template>

<script setup>
import {ref} from "vue";

const arr = ref(["张三","李四","王五","赵六","钱七"]);

const productArr = ref([
  {title:'小米手机',price:5000,num:800},
  {title:'华为手机',price:6000,num:900},
  {title:'苹果手机',price:7000,num:100},
  {title:'三星手机',price:8000,num:200},
  {title:'三星手机',price:8000,num:200}
]);

const del = (index)=>{
  if (confirm('您确认要删除此条数据吗?')){
    productArr.value.splice(index, 1);
  }
}
</script>

<style scoped>

</style>